<template>
  <div class="login">
    <div v-show="this.ifShow">

    <!--<div style="text-align: center; margin: 20px auto;width: 50%;">-->
      <!--<img src="../assets/logo.png" alt style="width: 100%" />-->
    <!--</div>-->

    <van-cell-group>
      <!-- 工号没有翻译，这里是被访人使用的登录页面 -->
      <van-field
        class="field"
        v-model="bill.username"
        label="工号"
        label-align="left"
        placeholder="请输入工号"
        clearable
      />
      <!-- <van-field
        class="field"
        v-model="bill.phone"
        label-align="left"
        :label="this.$t('login.phone')"
        :placeholder="this.$t('login.phonePrompt')"
        clearable
        @input="changeBlur"
      /> -->
      <van-field
        class="field"
        v-model="bill.password"
        :type="this.passwordType"
        label="密码"
        label-align="left"
        :right-icon="this.rightIcon"
        placeholder="请输入密码"
        @click-right-icon="seeNum"

      />

    </van-cell-group>

    <van-button class="btn" size="normal" type="primary"
        v-bind:disabled="disableSubmit"
        v-bind:loading="saving"
        v-cloak
        @click="loginRequest"
        ref="submit">登录</van-button>
        <!-- {{this.$t('login.login')}} -->

    <!-- <div style="text-align: center;margin-top: 10px;"><span style="color: #00893d;" @click="toLogin2">注册</span></div>  -->
    </div>

    <div v-show="this.ifShow == false && this.errorimg">
      <van-empty image="error" :description="description" />
    </div>
    <div v-show="this.ifShowDev">
      <van-empty :description="descriptionDev" />
    </div>

    <!--<p>{{code}}</p>-->
    <!-- 安全须知弹窗 -->
    <van-dialog v-model="showNotice" confirm-button-text="确认"
                confirmButtonColor="#4481eb" :beforeClose="beforeClose">
      <p style="font-size: 18px;text-align: center;padding: 0 60px;">上汽大众安全保障与人员服务隐私政策</p>
      <div :style="xuzhiStyle">
        <div style="height: 260px;overflow: auto">
          <p class="p-xuzhi">我们非常重视您的隐私权！</p>
          <p class="p-xuzhi">上汽大众汽车有限公司和上海上汽大众汽车销售有限公司，以及其相关服务可能存在的关联公司（“上汽大众”或“我们”）致力于保护我们员工、供应商以及其他第三方（“您”）的个人信息。本隐私政策(“本政策”)旨在向您说明，在和我们进行业务往来时，我们如何收集、使用、披露、分享、管理和保护您的个人信息。<b>请您务必认真阅读并充分理解本政策，特别是提示、限制或者免责等条款可能以粗体下划线方式进行标识，请您注意重点阅读。</b></p>
          <p class="p-xuzhi"><b>请注意，和我们进行业务往来就意味着您同意本政策，并同意根据本政策中规定的方式对您的个人信息进行收集、处理、披露和分享。如果您不同意本政策及未来修订版本的任何条款，请立即停止与我们的相关业务。</b></p>
          <p class="p-xuzhi"><b>适用范围</b></p>
          <p class="p-xuzhi">和我们进行业务往来均适用本隐私政策。</p>
          <p class="p-xuzhi">某些特定服务、业务还将适用特定的个人信息保护条款/隐私政策，我们将在向您提供特定服务、业务前通过告知书等方式说明。上述特定服务、业务的个人信息保护条款/隐私政策构成本隐私政策不可分割的组成部分，如与本隐私政策有不一致之处，以特定服务、业务的个人信息保护条款/隐私政策为准。</p>
          <p class="p-xuzhi"><b>第三方的隐私政策</b></p>
          <p class="p-xuzhi">除非本隐私政策另有明确所指，本隐私政策不适用于直接与第三方开展业务的情形。<b>请注意，第三方在提供产品或服务或者开展业务的过程中向您做出的任何承诺、声明或行为仅适用于该第三方与您之间的相关产品、服务、业务，不视为上汽大众的承诺、声明或行为。如果您使用第三方的产品或服务或者与第三方开展业务时向其提供您的个人信息，您的个人信息应当适用该第三方的隐私声明或政策，我们对任何第三方不当使用您的个人信息等行为不承担任何法律责任。</b></p>
          <p class="p-xuzhi"><b>信息的收集、使用和存储</b></p>
          <p class="p-xuzhi">为了提供服务或者开展业务，我们将在法律允许的范围内，根据本政策规定收集您的个人信息。<b>请注意，如果您不提供相关个人信息，我们可能无法向您提供服务或者开展业务。</b></p>
          <p class="p-xuzhi">上汽大众会根据下列方式和目的，收集和使用您的如下个人信息，您对此予以确认和同意：
            1. 身份信息、或身份证、驾驶证、行驶证等身份证件或其复印件：用于办理上汽大众的各位通行证件，如出入证。停车证、准驾证、试车证等；用于参加上汽大众组织的各类活动，如参观、培训等。
            2. 通讯信息、住宿信息：用于您与上汽大众在业务过程中，相关业务负责人与您进行联络。
            3. 生物识别信息，如脸部特征、行踪轨迹等：用于您在上汽大众区域内活动过程中的通行识别、治安管理等。
            4. 健康信息：用于您与上汽大众在业务往来中可能产生的职业健康管理，如有毒有害工种职业健康监护、体检等。
            5. 账户信息：用于您与上汽大众在业务往来中开设的相关内部账户管理，如上汽大众内部就餐卡等。<b>当我们要将您的个人信息用于本政策未载明的其它用途时，或基于特定目的收集而来的信息用于其他目的时，上汽大众会事先征求您的同意。</b>您的个人信息，将仅存储在上汽大众的公司服务器、或业务负责人的主机上。</p>

          <p class="p-xuzhi"><b>信息的处理</b></p>
          <p class="p-xuzhi"><b>您同意，我们有权对已经去标识化的个人信息进行统计分析予以商业化利用。</b></p>
          <p class="p-xuzhi">我们会对我们的产品或服务使用情况进行统计，并可能会与公众或第三方共享这些统计信息，以展示我们的产品或服务的整体使用趋势。这些统计信息不包含您的任何身份可识别信息。</p>
          <p class="p-xuzhi"><b>信息的披露与分享</b></p>
          <p class="p-xuzhi">上汽大众不会对外或向第三方披露您的个人信息，但下列情况除外：(a)事先获得您的明确授权或同意；(b)本条款和条件约定的情形；(c)根据有关法律法规的要求，包括为了遵守法律规定、进行法律程序、应传票或法庭命令要求、为配合执法机构或为执行本协议的条款而披露信息的行为；(d)根据相关政府主管部门的要求；(e)为维护社会公众的利益；(f)为维护上汽大众的合法权益。
            为实现本政策所列举的目的以及执行使用的合同条款，我们会以必要性为原则与合作伙伴、受信任的第三方共享您的信息，以便第三方向您提供您所需要的服务，以便总体上提升上汽大众产品或服务的个性化和优质程度。</p>
          <p class="p-xuzhi"><b>信息的处理</b></p>
          <p class="p-xuzhi"><b>您同意，我们有权对已经去标识化的个人信息进行统计分析予以商业化利用。</b></p>

          <p class="p-xuzhi"><b>信息安全保护</b></p>
          <p class="p-xuzhi">上汽大众会以“最小化”原则收集、使用、披露、分享用户信息，并通过本政策告知您相关信息的使用目的和范围。
            我们采取适当的、符合通行实践的安全措施和技术手段存储和保护您的个人信息，以防个人信息的丢失、泄漏、不当使用、未经授权阅览或披露。<b>您理解并同意，您与我们开展业务的过程中可能会利用外部通讯网络，因而有可能因我们可控范围外的因素而出现问题，上汽大众并不能完全保证外部通信网络传输的安全性。</b></p>

          <p class="p-xuzhi"><b>【来自第三方的个人信息】</b></p>
          <p class="p-xuzhi"><b>您在此确认，为便于业务开展，其他第三方提供或者传输给上汽大众的您的个人信息已经取得了您的同意以及符合所有适用的法律法规要求。
            适用法律</b>本政策，包括但不限于本政策的效力、解释、履行和争议解决，均应适用中华人民共和国法律（不包括香港特别行政区与澳门特别行政区法律）。</p>
          <p class="p-xuzhi"><b>本政策更新</b></p>
          <p class="p-xuzhi"><b>您同意，我们根据法律法规或者合理原因相应更新本政策，您愿意受修订后政策的约束。</b>如果涉及本政策重大变更，在必要时我们将以网站公告或者信息推送方式做出。</p>
        </div>

        <div style="padding:10px 20px;">
          <van-checkbox v-model="checkedNotice" style="font-size: 12px;">
            我已阅读并同意以上隐私授权
          </van-checkbox>
        </div>
      </div>
    </van-dialog>

  </div>
</template>

<script>
import { login } from "@/api/login";
import { qywxVerifyLogin } from "@/api/login";
import { qywxLogin,userConfirm } from "@/api/login";
import cfg from '@/config/config';
import axios from "axios";
import request from '@/utils/request'
import mapSetApi from "@/api/mapSet";

import {
   Cell,
   CellGroup,
   Field,
   Button,
   NavBar,
  Dialog,
  Checkbox,
  CheckboxGroup,
  Empty
} from "vant";

export default {
  components: {
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Field.name]: Field,
    [Button.name]: Button,
    [NavBar.name]: NavBar,
    [Empty.name]: Empty,
    [Dialog.name]: Dialog,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
  },
  data(){
    return{
      errorimg: false,
      description:"",
      ifShow:false,
      ifShowDev:false,
      descriptionDev:"请在手机端进行考勤",
      passwordType:"password",
      rightIcon:"closed-eye",
      saving: false,
      disableSubmit: false,
      showNotice: false, //隐私说明弹窗   默认false
      checkedNotice: false,  //是否勾选了安全须知
      xuzhiStyle: {
        maxHeight: '300px',
        height: '300px',
        // overflow: 'auto',
        // padding: ' 0 0 10px 0'
      },
      weChatIdz:0,
      verificationImage: require("@/assets/logo.png"),
      bill: {
        username:"",
        password:"",
        weChatId:"",
        phone:"",       //手机号
        sms:"",    //输入的验证码
      },
      verificationCode:"" ,  //生成的验证码
      code:"" ,
      timerd:null,
      times:0,
      status:1
    }
  },
  mounted(){
    // alert("code: " + JSON.stringify(this.$route.query));
    // this.getCalendarList();
    this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '验证中...',
      });

    //获取微信请求的的Code
    let newQuery = this.$route.query;
    let code = this.$route.query.code;
    if (!code){
      this.$msg.alert({
        title: '错误提示',
        message: '验证失败，该链接未携带企业微信code码',
      }).then(() => {
        // on close
      });
    }

    // let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)==null?false:true;
    // flag?is_weixin()?"来自于APP端企业微信":"":is_weixin()?"来自于PC端的企业微信":"来自于PC端浏览器";}
    console.log(navigator.userAgent.toLowerCase());
    let device = navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
    let windowswechat = navigator.userAgent.toLowerCase().indexOf('windowswechat') !== -1;
    console.log(device,windowswechat)
    if (device && !windowswechat){
      console.log("设备是APP端企业微信")
    } else if(device && windowswechat ) {
      console.log("来自于PC端的企业微信");
      this.ifShowDev = true;
      this.$toast.clear();
      return
    }

    this.timerd = setInterval(() => {
      this.times++;
      if (this.times > 30 && this.status == 1) {
        clearInterval(this.timerd);
        this.errorimg = true;
        this.$toast.fail('请求超时');
        this.description = "请求超时";
      }
    }, 1000);

    if (code) {
      this.qywxVerifyLogin(newQuery);
    }else {
      // this.ifShow = true;
      this.$toast.clear();
      this.errorimg = true;
      this.description = "获取企业微信账号失败";
      clearInterval(this.timerd);

    };

  },
  methods: {
    // 获取考勤点列表
    async getCalendarList() {
      let param = {
        pageNumber: 1,
        pageSize: 2000,
        serchTxt: "",
      };
      let res = await mapSetApi.getDzStDeviceList(param);
      alert(JSON.stringify(res));

    },

    shareWechat() {
      let self = this,
        url_temp = window.location.href.split("#")[0];
      request('get', cfg.apiUrl + "wXLogin/getQySign?webUrl="+url_temp).then(function(response) {
        // alert(JSON.stringify(res));
        if(response.data){
          let data = response.data;
          let appId = data.weixin.corpid;
          let nonceStr = data.weixin.nonceStr; // 必填，生成签名的随机串
          let timestamp = data.weixin.timestamp;  //生成签名的时间戳
          let signature = data.weixin.signature; // 必填，签名，见附录1
          wx.config({
            beta: true,
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
            timestamp: timestamp, // 必填，生成签名的时间戳
            nonceStr:nonceStr, // 必填，生成签名的随机串
            signature: signature,// 必填，签名，见附录1
            jsApiList: ['hideOptionMenu'],//必填
          });
          wx.ready(function (res) {
            wx.hideOptionMenu();
          });
          wx.error(function(res){
            self.$toast.fail("验证签名失败")
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
            console.log(JSON.stringify(res));
          });
        }
      }).catch(function(error) {
        self.$toast.fail("获取签名失败")
        console.log(JSON.stringify(error));
      });
    },
    //企业微信验证登录
    qywxVerifyLogin(query){
      let that = this;
      qywxVerifyLogin(query).then(resp=>{
        if (resp.data.success) {
          // alert(JSON.stringify(resp.data));
          if(''!=resp.data.result.weChatId){
            if(resp.data.result.falg){
              this.weChatIdz = resp.data.result.weChatId;
              // this.$router.replace("/positionAttendance");
              // location.assign("/etmsapp/positionAttendance");
              // this.qywxLogin(resp.data.result.weChatId);   //测试服务器使用这个，因为后台还没更新提交告知书的接口
              if (resp.data.result.isConfirm == 1){
                this.qywxLogin(resp.data.result.weChatId);
              } else {
                this.$toast.clear();
                this.showNotice = true;
              }

            }else{
              this.ifShow = true;
              this.bill.weChatId = resp.data.result.weChatId;
              this.$store.state.weChatId = resp.data.result.weChatId;
              this.shareWechat();
            }
          }else{
            // alert("获取企业微信账号失败");
            // 如果这里报错
            this.$toast.clear();
            this.errorimg = true;
            this.description = "未获取到weChatId信息";
            clearInterval(this.timerd);
          }
        } else {
          // this.$msg.alert({
          //   title: "提示",
          //   message: "验证失败"
          // });
          this.$toast.clear();
          this.errorimg = true;
          this.description = "验证响应错误";    // 请求成功，响应失败
          clearInterval(this.timerd);
        }
      }).catch(function (err) {
        console.log("错误信息: "+err);
        that.$toast.clear();
        that.errorimg = true;
        that.description = "验证请求失败";    // 请求发送失败
        clearInterval(that.timerd);
      })

    },

    // 检测是否有未输入的，全部输入注册按钮才可以点击
    changeBlur(){
      // if (this.bill.phone != "" && this.bill.password != "" && this.bill.sms != ""){
      //   this.disableSubmit = false
      // } else {
      //   this.disableSubmit = true
      // }
    },
    resetForm() {
      this.bill.username = "";
      this.bill.password = "";
    },
    setSumitButtonStatus(bol) {
      this.saving = bol;
      this.disableSubmit = bol;
    },
    validForm() {
      if (this.bill.username == "") {
        this.$msg.alert({
          title: "提示",
          message: "用户名不能为空"
        });
        return false;
      }

      // 手机格式判断正则表达式
      var fhoneRegular = /^1(3|4|5|6|7|8|9)\d{9}$/;
      // if (this.bill.phone == "") {
      //   this.$msg.alert({
      //       title: this.$t('verify.prompt'),
      //       message: this.$t('verify.visitorPhone'),
      //       confirmButtonText: this.$t('appointmentForm.define'),
      //       confirmButtonColor: "#00893d"
      //     });
      //   return false;
      // } else if (fhoneRegular.test(this.bill.phone)) {
      //   // console.log("手机号符合格式");
      // } else {
      //   this.$msg.alert({
      //       title: this.$t('verify.prompt'),
      //       message: this.$t('verify.phoneError'),
      //       confirmButtonText: this.$t('appointmentForm.define'),
      //     confirmButtonColor: "#00893d"
      //   });
      //   return false;
      // }

      if (this.bill.password == "") {
        this.$msg.alert({
          title: "提示",
          message: "密码不能为空"
        });
        return false;
      } else {
        // 登录密码正则验证格式
      }

      // if (this.bill.sms == "") {
      //   this.$toast("验证码不能为空");
      //   return false;
      // }
      // if(this.bill.sms != this.verificationCode){
      //   this.$toast("输入的验证码不正确");
      //   return false;
      // }

      return true;
    },
    //企业微信正式员工自主登陆
     qywxLogin(weChatId){
       qywxLogin({weChatId:weChatId}).then(resp=>{
         // alert(JSON.stringify(resp.data));
         if (resp.data.success) {
           clearInterval(this.timerd);
           this.$store.state.weChatId = weChatId;
           // 登陆成功时，把获取到的账号信息赋值给本地变量（this.$store状态管理工具）
           this.$store.state.user = resp.data.content;
           this.$store.commit('addUserInfo', resp.data.content);
           localStorage.setItem("store",JSON.stringify(this.$store.state));
           // alert("验证页面的user: " +JSON.stringify(resp.data.content));
           this.$toast.clear();
           // this.$router.replace("/positionAttendance");      // 测试环境
           // location.assign("/etmsapp/positionAttendance");
           window.location.replace("/etmsapp/positionAttendance");    // 现场环境
         } else {
           // this.$msg.alert({
           //   title: "提示",
           //   message: this.$t('app.backgroundError')
           // });
           this.$toast.clear();
           this.errorimg = true;
           this.description = "程序内部错误";
           clearInterval(this.timerd);
         }

     }).catch(function (err) {
       console.log(err);
     });

    },
    //企业微信自己输入账号密码登录
    async loginRequest() {
      // this.$router.replace("/positionAttendance");

      // var me = this;
      // if (!me.validForm()) return;
      // me.setSumitButtonStatus(true);
      // this.$toast.loading({
      //   duration: 0, // 持续展示 toast
      //   forbidClick: true,
      //   message: '登录中...',
      // });
      // let resp = await login(this.bill);
      // console.log(resp.data);
      // if (resp.data.success) {
      //   // console.log(resp.data.result);
      //   this.$toast.clear();
      //   me.setSumitButtonStatus(false);
      //   me.resetForm();
      //   // 登陆成功时，把获取到的账号信息赋值给本地变量（this.$store状态管理工具）
      //   // this.$store.state.user = resp.data.result;
      //   // console.log(this.$store.state.user);
      //   this.$store.state.weChatId = 28032543;  //测试使用，有值是员工，没值是访客
      //   this.$router.replace("/positionAttendance");
      // } else {
      //   me.setSumitButtonStatus(false);
      //   this.$msg.alert({
      //     title: "提示",
      //     message: this.$t('app.backgroundError')
      //   });
      // }
    },
    seeNum(){
      this.passwordType = this.passwordType === "password" ? "text":"password";
      this.rightIcon = this.rightIcon === "closed-eye" ? "eye":"closed-eye";
    },
    onClickBack() {
      this.$router.replace("/");
    },
    toLogin2(){
      this.$router.replace("/");
    },
    // 安全须知弹窗确认回调
    beforeClose(action, done) {
      if (action === 'confirm') {
        if (this.checkedNotice == false) {
          this.$toast("请确认已阅读隐私授权说明");
          done(false);
          return
        }

        this.$toast.loading({
          duration: 0, // 持续展示 toast
          forbidClick: true,
          message: "加载中...",
        });
        // 发起提交请求，把阅读参数提交上去，提交成功后，关闭此弹窗，关闭loading，并跳转定位页面
        userConfirm({jlogUserId: this.weChatIdz}).then(resp=>{
          // alert(JSON.stringify(resp));
          if (resp.data.success) {
            done();   // 关闭弹窗
            this.qywxLogin(this.weChatIdz);
          } else {
            this.$toast.fail(resp.data.message);
          }

        }).catch(function (err) {
          this.$toast.fail(err);
        });


      } else {
        done();
      }
    },

  }
}
</script>
<style lang="scss" scoped>
.login{
  padding-top: 146px;
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
}
  h1 {
    text-align: center;
    font-size: 1.6em;
    margin-top: 130px;
    margin-bottom: 50px;
  }
  .van-hairline--top-bottom::after{
    border-top: none;
  }

  .field {
    padding: 10px 0;
  }
  .van-cell:not(:last-child)::after{
    left: 0;
  }
</style>
